<template>
  <view class="content">
    <view class="works-item" v-for="(item, index) in list" :key="index">
      <view class="works-item-top">
        <image class="header-img" :src="item.image"></image>
        <view
          ><view class="name">{{ item.name }}</view
          ><view class="time">{{ item.time }}</view></view
        >
      </view>
      <view class="works-item-title">{{ item.title }}</view>
      <view class="works-item-details">{{ item.details }}</view>
      <video
        class="video"
        :src="item.video"
        controls
        style="
          width: 100%;
          height: 360rpx;
          border-radius: 20rpx;
          margin-top: 28rpx;
        "
      ></video>
      <view class="dynamic-icon">
        <view>
          <u-icon name="share" color="#aaa" size="30"></u-icon
          ><view>{{ item.share }}</view>
        </view>
        <view>
          <u-icon name="chat" color="#aaa" size="30"></u-icon
          ><view>{{ item.comment }}</view>
        </view>
        <view>
          <u-icon name="star" color="#aaa" size="30"></u-icon>
          <view>{{ item.like }}</view>
        </view>
        <view>
          <u-icon name="thumb-up" color="#aaa" size="30"></u-icon
          ><view>{{ item.good }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          image: require("@/static/img/header.jpg"),
          name: "小貂蝉",
          time: "2022-10-23",
          title: "小肚腩明显？这么练效果爆",
          details:
            "上班路上再骑一次回到平时骑到的原地，21日刚刚过去 的21日，学校就随便推荐一辆普通的公路，可能fgkuagsf",
          video: "@/static/new/e59fec624346c7a2f5f525822a641852.mp4",
          share: 24,
          comment: 12,
          like: 23,
          good: 104,
        },
        {
          image: require("@/static/img/header.jpg"),
          name: "赵子龙",
          time: "2022-10-23",
          title: "小肚腩明显？这么练效果爆",
          details:
            "上班路上再骑一次回到平时骑到的原地，21日刚刚过去 的21日，学校就随便推荐一辆普通的公路，可能fgkuagsf",
          video: "@/static/new/e59fec624346c7a2f5f525822a641852.mp4",
          share: 24,
          comment: 12,
          like: 23,
          good: 45,
        },
        {
          image: require("@/static/img/header.jpg"),
          name: "刘禅",
          time: "2022-10-23",
          title: "小肚腩明显？这么练效果爆",
          details:
            "上班路上再骑一次回到平时骑到的原地，21日刚刚过去 的21日，学校就随便推荐一辆普通的公路，可能fgkuagsf",
          video: "@/static/new/e59fec624346c7a2f5f525822a641852.mp4",
          share: 24,
          comment: 12,
          like: 23,
          good: 34,
        },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.content {
  padding: 0 30rpx;
  .works-item {
    margin-top: 34rpx;
    .works-item-top {
      display: flex;
      .header-img {
        margin-right: 20rpx;
        width: 72rpx;
        height: 72rpx;
        border-radius: 50%;
      }
      .name {
        font-size: 28rpx;
        color: #181818;
      }
      .time {
        margin-top: 10rpx;
        color: #acacac;
      }
    }
    .works-item-title {
      margin-top: 36rpx;
    }
    .works-item-details {
      margin-top: 28rpx;
    }
    .dynamic-icon {
      display: flex;
      //   align-items: center;
      margin-top: 20rpx;
      justify-content: right;
      > view {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #aaa;
        margin-left: 20rpx;
        font-size: 20rpx;
      }
    }
  }
}
</style>
